<template>
  <div class="item">
    <img class="item__icon" src="@/assets/img/icon_gift.png" v-if="icon">
    <router-link :to="`/gift/${item.gift_id}`" class="item__info" v-if="!onlyBtn">
      <div class="item_name">
        <span class="item__title">礼包名称:{{item.title}}</span>
      </div>
      <div class="item__head">
        <span class="need">所需: <span>{{item.condition}}</span> </span>
        <span class="total">总计: <span>{{item.total_cnt}} </span></span>
        <span class="remain">剩余: <span>{{item.remain_cnt}}</span></span>
        <span class="tag_libao" v-for="(tag, idx) in item.tag" :key="idx">{{tag}}</span>
      </div>
      <div class="item__body">
        礼包内容:{{item.content}}
      </div>
    </router-link>
    <div class="item__btn">
      <button class="btn_secondary" @click="addGroup(item.qq_group)" v-if="item.qq_group">加群</button>
      <button class="btn_primary" @click="showCode(item.code || item.gift_code)"
              v-else-if="item.code || item.gift_code">查看
      </button>
      <button class="btn_primary" @click="addGift(item.gift_id)" v-else>领取</button>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: 'giftItem',
    props: {
      item: {
        type: Object
      },
      icon: {
        type: Boolean,
        default: false
      },
      onlyBtn: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      ...mapGetters([
        'giftDetail'
      ])
    },
    data() {
      return {
        action: ''
      }
    },
    methods: {
      addGift(id) {
        this.action = 'add'
        this.$store.dispatch('addGift', {
          gift_id: id
        })
      },

      showCode(code) {
        this.action = 'show'
        this.$store.commit('GET_GIFT_DETAIL', {
          data: {
            ...this.giftDetail,
            code,
            t: new Date().getTime()
          }
        })
      }
    },
    watch: {
      giftDetail() {
        if (this.action) {
          if (this.action === 'add') {
            let {name} = this.$route
            let {id} = this.$route.params
            if (name === 'giftDetail') {
              this.$store.dispatch('getGiftDetail', {
                gift_id: id
              })
            } else if (name === 'gameDetail') {
              this.$store.dispatch('getGameDetail', {
                game_id: id
              })
            } else if (name === 'gift') {
              this.$store.dispatch('getGiftList')
              this.$store.dispatch('getGiftList', {
                is_app: 1
              })
            }
          }

          this.$store.commit('SET_POP_STATUS', {
            type: 'giftCode',
            show: true
          })
          this.action = ''
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .item {
    align-items: center;
    border-bottom: 1px solid #f0f0f0; /* no */
    display: flex;
    padding: 0.1rem 0;

    &:last-child {
      border-bottom: 0 none;
    }

    &__icon {
      height: 0.5rem;
      margin-right: 0.08rem;
      width: 0.5rem;
    }

    &__info {
      flex: 1;
      overflow: hidden;
    }

    &__head {
      align-items: center;
      display: flex;
      margin-bottom: 0.05rem;
      .need span {
        color: #FF9A05;
        font-size: 0.18rem;
      }
      .total {
        margin-left: 0.12rem;
        span {
          color: #58D3CA;
          font-size: 0.18rem;

        }
      }
      .remain {
        margin-left: 0.1rem;
        span {
          color: #0DC6F2;
          font-size: 0.18rem;

        }
      }
    }

    &__title {
      color: #333;
      font-size: 0.15rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &__body {
      color: #999;
      font-size: 0.12rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

    }

    &__btn {
      height: 0.26rem;
      margin-left: 0.4rem;
      width: 0.52rem;
    }
  }

  .tag_libao {
    margin-left: 0;
    margin-right: 0.08rem;
  }
</style>
